<template>
    <div>
        <div id="background"></div>
        <div>
            <el-card>
                <img src="../assets/photo/login/ico.png" alt="寄" id="logo">
                <div id="title">大模型编程助手</div>
                <div id="input_frame"> 
                    <el-input v-model="username" placeholder="请输入注册账户(8~16位,包含字母和数字)" class="underline-input" style="margin-bottom: 20px;"></el-input>
                    <el-input v-model="accountName" placeholder="请输入注册账户名" class="underline-input" style="margin-bottom: 20px;"></el-input>
                    <el-input placeholder="请输入密码(8~16位,包含字母和数字)" v-model="password" show-password class="underline-input" style="margin-bottom: 20px;"></el-input>
                    <el-input placeholder="请确认密码" v-model="confirmPassword" show-password class="underline-input" style="margin-bottom: 20px;" :disabled="!passwordValid"></el-input>
                    <div type="primary" plain v-on:click="back" id="back">返回</div>
                    <el-button type="primary" v-on:click="log" id="log">注册</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>

<style>
    html, body, #app {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    #background {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url("../assets/photo/login/background.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .el-card {
        width: 30vw;
        max-width: 400px;
        min-width: 300px;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 15px !important;
        padding: 20px;
        text-align: center;
    }

    #logo {
        width: 50%;
        height: auto;
        margin-bottom: 20px;
    }

    #title {
        font-size: 2.5vw;
        text-align: center;
        margin-bottom: 20px;
    }

    #input_frame {
        margin-top: 20px;
    }

    #back {
        margin-top: -1.5vh;
        font-size: 14px;
        color: #555;
        cursor: pointer;
        float: right;
    }

    #log {
        width: 60%;
        margin-top: 20px;
        margin-left: 20%;
    }

    /* 输入框样式 */
    .underline-input .el-input__inner {
        border: none;
        border-bottom: 1px solid #dcdfe6;
        border-radius: 0;
        box-shadow: none;
    }

    .underline-input .el-input__inner:focus {
        border-bottom-color: #409eff;
        box-shadow: none;
    }

    .underline-input .el-input__inner:hover {
        border-bottom-color: #c0c4cc;
    }

    @media (max-width: 768px) {
        .el-card {
            width: 80vw;
            padding: 10px;
        }

        #title {
            font-size: 6vw;
            margin-bottom: 10vw;
        }

        #logo {
            width: 70%;
        }

        #input_frame {
            margin-top: 10vw;
            width: 70.5vw;
        }

        el-input,
        el-button {
            width: 100%;
        }

        #back {
            font-size: 3vw;
        }

        #log {
            width: 100%;
            margin-top: 4vw;
            margin-left: 0;
        }
    }
</style>

<script>
    import { Message } from 'element-ui';
    import { signup } from '../api/signup';
    export default {
        data() {
            return {
                username: '',         // 账号
                accountName: '',      // 用户名
                password: '',         // 密码
                confirmPassword: ''   // 确认密码
            };
        },
        computed: {
            passwordValid() {
                return this.password.length >= 8 && this.password.length <= 16 && /\d/.test(this.password) && /[a-zA-Z]/.test(this.password);
            },
            formValid() {
                return this.username && this.accountName && this.passwordValid && this.password === this.confirmPassword;
            }
        },
        watch: {
            password(newVal) {
                if (!this.passwordValid) {
                    this.confirmPassword = '';
                }
            }
        },
        methods: {
            async log() {
                if (!this.formValid && this.confirmPassword == this.password) {
                    Message({
                        message: '请完善表单信息',
                        type: 'warning'
                    });
                    return;
                }
                if(this.confirmPassword != this.password) {
                    Message({
                        message: '两次密码输入不一致',
                        type: 'warning'
                    });
                    return;
                }
                if(!(this.username.length >= 8 && this.username.length <= 16 && /\d/.test(this.username) && /[a-zA-Z]/.test(this.username))){
                    Message({
                        message: '账号格式错误',
                        type: 'warning'
                    });
                    return;
                }
                // 后端验证注册，并返回注册结果
                const getData = await signup(this.$data.username, this.$data.accountName, this.$data.password);
                
                if (getData.status === 200) {
                    // 注册成功（由于userid不返回，就先不本地存储，在登录时再做）
                    Message({
                        message: '注册成功',
                        type: 'success'
                    });
                    this.$router.push('/');
                } else {
                    Message({
                        message: getData.msg,
                        type: 'error'
                    });
                }
            },
            back() {
                this.$router.push('/');
            }
        }
    }
</script>
